<template>
  <div>
    <body>
    <main>
      <div class="body-comment">
        <div class="wrapper">
          <div class="flex-row">
            <div class="flex-col-4">
              <div class="body-comment-left">
                <ul class="list-group">
                  <li class="list-group-item pointer"><i class="iconfont icon-huati"></i>热门推荐</li>
                  <li class="list-group-item"><i class="iconfont icon-taolunqu"></i><a href="#">社区热榜</a></li>
                  <li class="list-group-item"><i class="iconfont icon-dianzan"></i><a href="#">我点赞过的</a></li>
                  <li class="list-group-item"><i class="iconfont icon-shoucang"></i><a href="#">我收藏的</a></li>
                  <li class="list-group-item"><i class="iconfont icon-pengyouquan"></i><a href="#">全部专栏</a></li>
                </ul>
              </div>
            </div>

            <div class="flex-col-16">
              <div class="body-comment-center">
                <div class="body-comment-center-top flex-row">
                  <div class="flex-col-3">
                    <h3>全部</h3>
                  </div>
                  <div class="flex-col-21">
                  </div>
                </div>

                <div v-for="annCom in annAndCom" :key="annAndCom.id">
                  <div class="body-comment-center-mian">
                    <div class="comment flex-row">
                      <div class="flex-col-3">
                        <div class="head">
                          <i class="iconfont icon-wode"></i>
                        </div>
                      </div>
                      <div class="flex-col-21">
                        <div class="comment-name">
                          <h3>{{ annCom.announcement.name }}</h3>
                          <p>{{ annCom.announcement.datetime }} 2.4k阅读</p>
                        </div>
                        <div class="comment-txt">
                          {{ annCom.announcement.text }}
                        </div>
                        <div class="video">
                          <img :src="'/src/' + annCom.announcement.imgPath" style="width: 200px; height: 200px"/>
                        </div>
                      </div>
                    </div>
                    <div class="flex-row comment-underside">
                      <div class="flex-col-6">
                        <i class="iconfont icon-shoucang">收藏</i>
                      </div>
                      <div class="flex-col-6">
                        <i class="iconfont icon-fenxiang">分享</i>
                      </div>
                      <div class="flex-col-6 red">
                        <i class="iconfont icon-xiaoxi">评论</i>
                      </div>
                      <div class="flex-col-6">
                        <i class="iconfont icon-aixin">喜欢</i>
                      </div>
                    </div>
                  </div>
                  <div class="body-comment-center-bottom">
                    <div class="observer">
                      <el-collapse >
                        <el-collapse-item v-if="annCom.commentList" title="展开评论" name="1">
                          <div class="flex-row" v-for="com in annCom.commentList" :key="com.id">
                            <div class="flex-col-3">
                              <div class="head">
                                <i class="iconfont icon-wode"></i>
                              </div>
                            </div>
                            <div class="flex-col-21">
                              <div class="observer-name">
                                <h3>{{ com.name }}</h3>
                                <p>{{ com.datetime }}</p>
                              </div>
                              <div class="comment-observer-txt">
                                {{ com.message }}
                              </div>
                            </div>
                          </div>
                        </el-collapse-item>
                      </el-collapse>
                    </div>
                    <div class="body-comment-center-bottom-message">
                      <form class="box" :model="from">
                        <textarea class="txt" v-model="from.message" rows="2" cols="105"
                                  placeholder="一言值千金"></textarea>
                        <!--<el-form-item label="">-->
                        <!--  <el-input v-model="form.message" type="textarea" rows="2" cols="105" placeholder="一言值千金" />-->
                        <!--</el-form-item>-->
                        <button type="submit" @click="addComment(annCom.announcement.id)" class="btn">发表评论</button>
                      </form>
                    </div>
                  </div>
                </div>

              </div>
            </div>
            <div class="flex-col-4">
              <div class="body-comment-right">
                <div class="top-box">
                  <div class="flex-row">
                    <div class="flex-col-8 mypho">
                      <i class="iconfont icon-wode"></i>
                    </div>
                    <div class="flex-col-16 myname">
                      <h4 v-if="username">{{ username }}</h4>
                      <h4 v-else>用户</h4>
                    </div>
                  </div>
                  <ul class="flex-row body-comment-right-list">
                    <li class="flex-col-8 body-comment-right-item">
                      <i>22</i>
                      <a href="#">关注</a>
                    </li>
                    <li class="flex-col-8 body-comment-right-item">
                      <i>22</i>
                      <a href="#">粉丝</a>
                    </li>
                    <li class="flex-col-8 body-comment-right-item">
                      <i>22</i>
                      <a href="#">动态</a>
                    </li>
                  </ul>
                </div>
                <div class="mid-box">
                  <div class="goods-title">
                    <h4>热门商品推荐</h4>
                  </div>
                  <div class="flex-row body-comment-right-goods">
                    <div class="flex-col-8">
                      <img src="@/assets/img/iphone-card-40-iphone14pro-202209.png" width="65px" height="50px">
                    </div>
                    <div class="flex-col-8">
                      <img src="@/assets/img/iphone-card-40-iphone12-202209.png" width="65px" height="50px">
                    </div>
                    <div class="flex-col-8">
                      <img src="@/assets/img/iphone-card-40-iphone13-202209.png" width="65px" height="50px">
                    </div>
                  </div>
                  <div class="flex-row body-comment-right-goods">
                    <div class="flex-col-8">
                      <img src="@/assets/img/iphone-card-40-iphone14-202209.png" width="65px" height="50px">
                    </div>
                    <div class="flex-col-8">
                      <img src="@/assets/img/iphone-card-40-iphonese-202203.png" width="65px" height="50px">
                    </div>
                    <div class="flex-col-8">
                      <img src="@/assets/img/iphone-card-40-iphone14pro-202209.png" width="65px" height="50px">
                    </div>
                  </div>
                  <div class="flex-row body-comment-right-goods">
                    <div class="flex-col-8">
                      <img src="@/assets/img/800_800_95FE8760DCE1A41CD62C942DE8FD7F4Cmp.png" width="65px" height="58px">
                    </div>
                    <div class="flex-col-8">
                      <img src="@/assets/img/800_800_391F78057B02534E33860A555B5D66B4mp.png" width="65px" height="58px">
                    </div>
                    <div class="flex-col-8">
                      <img src="@/assets/img/800_800_F9299E9275D751EB3B64858C389779358A27128E74B4B0DCmp.png"
                           width="65px" height="58px">
                    </div>
                  </div>
                </div>
                <div class="bottom-box">
                  <div class="goods-theme">
                    <h4>热门话题</h4>
                  </div>
                  <div class="flex-row body-comment-right-theme">
                    <p><a href="#">#限时返厂#</a></p>
                  </div>
                  <div class="flex-row body-comment-right-theme">
                    <p><a href="#">#一表用三代，人走表还...#</a></p>
                  </div>
                  <div class="flex-row body-comment-right-theme">
                    <p><a href="#">#双11特价优惠#</a></p>
                  </div>
                  <div class="flex-row body-comment-right-theme">
                    <p><a href="#">#优惠卷大礼来袭#</a></p>
                  </div>
                  <div class="flex-row body-comment-right-theme">
                    <p><a href="#">#是兄弟就来砍我一刀#</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    </body>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      annAndCom: [],
      from: {
        message: ''
      },
      username: ''
    }
  },
  created() {
    this.annAndComList();
    this.member();
  },
  methods: {
    annAndComList() {
      request.post("/api/annList").then(
          res => {
            console.log("res=", res)
            // console.log("ann=", res.data)
            if (res.code === '200') {
              this.annAndCom = res.data
              console.log("annAndCom=", this.annAndCom);
              // this.announcement = res.data.announcement
              // console.log("announcement=", this.announcement)
            }
            if (res.code === '555') {
              ElMessage({
                message: '页面加载失败',
                type: 'error',
              })
            }
          }
      )
    },
    addComment(announcementId) {
      console.log("message=", this.from.message);
      // console.log("announcementId=", announcementId);
      request.get("/api/addComment/" + announcementId, {
            params: {
              message: this.from.message
            }
          }
      ).then(
          res => {
            // console.log("res=", res);
            if (res.code === '200'){
              ElMessage({
                message: res.msg,
                type: 'success',
              })
              this.from = {}
              this.annAndComList();
            }
            if (res.code === '555'){
              ElMessage({
                message: '操作失败',
                type: 'warning',
              })
              this.from = {}
            }
          }
      )
    },
    member(){
      request.post("/api/userStatus").then(
          res => {
            if (res.data){
              this.username = res.data.username;
              this.userstatus = res.data.status;
            }
          }
      )
    }
  }
}

</script>

<style>
</style>